<template>
  <div class="bottom-menu">
    <check-buttom
      :value="isSelect"
      class="bottom-menu-select-all"
      @click.native="selectAll"
    ></check-buttom>
    <span>全选</span>
    <span class="total-price">合计:{{ totalPrice }}</span>
    <span class="buy-product" @click="buyClick">去计算</span>
  </div>
</template>

<script>
import CheckButtom from "./CheckButtom.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    CheckButtom
  },
  computed: {
    ...mapGetters(["cartList", "cartLength"]),
    totalPrice() {
      if (this.cartLength) {
        // 返回所有checked为真的元素新数组
        const checkedCartList = this.cartList.filter(
          ele => ele.checked === true
        );
        console.log(checkedCartList, "fuckyou");
        const price = checkedCartList.reduce((total, ele) => {
          // 坑爹点：不传initvlaue的时候 total是个obj类型
          console.log("typeof deafault total", typeof total);
          return total + ele.count * parseInt(ele.newPrice);
        }, 0);
        return price;
      } else {
        return 0;
      }
    },
    isSelect() {
      //  1.使用filter  有一个checked属性为假的时候 返回false    非零的数字取反就是false 0取反就是true
      //  return !this.cartList.filter(ele => !ele.checked).length

      // 效率最高 找到了之后就停止执行
      // 2.使用find 有一个checked属性为假的时候 返回找到元素的值：false  
  /*     没找到false的属性，则返回一个undefined 
      一个undefined取反 返回的值是ture  
      一个对象取反 返回的值是false
      一个对象取两次！ 可以把任意类型转换成obj */
      return !this.cartList.find(ele => ele.checked==false);
    }

    // 3.普通遍历
    //  for(const item of this.cartList){
    //    if(item.checked === false){
    //      return false
    //    }
    //  }
    //  return true
  },
  methods: {
    selectAll(){
      if (this.isSelect) {
        this.cartList.forEach(element => {
          element.checked = false;
        });
      } else {
        this.cartList.forEach(element => {
          element.checked = true;
        });
      }
    },
    buyClick(){
      if(this.cartList.find(ele => ele.checked))
      this.$toast2('对接支付宝的功能还没做呢，这么着急给我送钱吗 啊？？？？？',2000)
      else
      this.$toast2('你根本就没有订单要支付 不诚心、没钱买就不要点开app好吗? 不会用就不要用OK？？？？？？ ',2000)
    }
  }
}
</script>

<style>
.bottom-menu {
  width: 100%;
  height: 44px;
  background-color: #eee;
  position: fixed;
  bottom: 50px;
  left: 0;
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  color: #888;
  line-height: 44px;
  padding-left: 35px;
  box-sizing: border-box;
}

.bottom-menu .bottom-menu-select-all {
  position: absolute;
  line-height: 0;
  left: 12px;
  top: 13px;
}

.bottom-menu .total-price {
  margin-left: 15px;
  font-size: 16px;
  color: #666;
}

.bottom-menu .buy-product {
  background-color: orangered;
  color: #fff;
  width: 100px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  float: right;
}
</style>
